import { useState, useEffect } from "react";
import "./index.less";
import { RightOutlined } from '@ant-design/icons';
import { Modal, Input, message } from 'antd';
import { request } from "../../../../../common/request";
import { urls } from "../../../../../common/urls";
import UploadImg from "../../../../../components/UploadImg";

function Profile({profileList, setProfileList}: any) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleQRCode = () => {
    setIsModalOpen(true);
  };

  const handleAvatar = (avatar: string) => {
    setProfileList({
      ...profileList,
      avatar
    })
  }

  const handleInviteCode = (e: any) => {
    setProfileList({
      ...profileList,
      invite_code: e.target.value
    })
  }

  const handleNickName = (e: any) => {
    setProfileList({
      ...profileList,
      username: e.target.value
    })
  }

  const handleMobile = (e: any) => {
    setProfileList({
      ...profileList,
      mobile: e.target.value
    })
  }

  const submitProfileList = () => {
    request({
      method: "post",
      data: {
        method: urls.profilesubmit,
        avatar: profileList.avatar,
        username: profileList.username,
        mobile: profileList.mobile
      },
    }).then((res: any) => {
      message.success(res.msg);
    }).catch((err) => {
      message.error(err);
    });
  };

  return (
    <>
      <div className="profile-page text-style">
        <div className="profile-page-item">
          <div className="profile-page-item-title">头像</div>
          <div className="profile-page-item-right">
            <UploadImg className="profile-page-item-avatar" groupImg={ profileList.avatar } getAvatar={ handleAvatar } />
            <RightOutlined className="profile-page-item-arrow" />
          </div>
        </div>
        <div className="profile-page-item">
          <div className="profile-page-item-title">昵称</div>
          <div className="profile-page-item-right">
            <Input className="profile-page-item-text" value={ profileList.username } onChange={ handleNickName } />
            <RightOutlined className="profile-page-item-arrow" />
          </div>
        </div>
        <div className="profile-page-item">
          <div className="profile-page-item-title">手机号</div>
          <Input className="profile-page-item-text" value={ profileList.mobile } onChange={ handleMobile } />
        </div>
        <div className="profile-page-item">
          <div className="profile-page-item-title">我的二维码</div>
          <div className="profile-page-item-right" onClick={ handleQRCode }>
            <img className="profile-page-item-QRcode" src="../../../../../assets/icon/txl_qun_erweima@2x.png" alt="" />
            <RightOutlined className="profile-page-item-arrow" />
          </div>
        </div>
        <div className="profile-page-item">
          <div className="profile-page-item-title">邀请码</div>
          <Input className="profile-page-item-text" value={ profileList.invite_code } onChange={ handleInviteCode } />
        </div>
        <div className="profile-page-btn" onClick={ submitProfileList }>保存</div>

        {/* 我的二维码弹窗 */}
        <Modal
          className="profile-page-QRcodeDialog"
          title="我的二维码"
          open={ isModalOpen }
          onCancel={ handleCancel }
          footer={ null }
          centered
        >
          <div className="profile-page-QRcodeDialog-content text-style">
            <img className="profile-page-QRcodeDialog-avatar" src={ profileList.avatar } alt="" />
            <div className="profile-page-QRcodeDialog-nickName">{ profileList.username }</div>
            <img className="profile-page-QRcodeDialog-QRimg" src={ profileList.invite_poster } alt="" />
            <div className="profile-page-QRcodeDialog-tips">扫描二维码，添加好友</div>
          </div>
        </Modal>
      </div>
    </>
  );
}

export default Profile;
